import { patch } from "./vnode/patch";
import Watcher from "./observer/watcher";

export function mountComponent(vm, el) {
  // vm._render()：将 render 函数变成一个 vnode，定义在/src/vnode/index.js中
  // vm._update()：将 vnode 生成真实 dom，插入到页面
  callHook(vm, 'beforeMount');

  // vm._update(vm._render(); // 这一行改为下面的watcher方式
  let updateComponent = () => vm._update(vm._render());
  // 初次渲染模板
  new Watcher(vm, updateComponent, () => callHook(vm, 'updated'), { user: false });

  callHook(vm, 'mounted');
}

export function lifecycleMixin(Vue) {
  Vue.prototype._update = function (vnode) {
    let vm = this;
    // 需要区分是首次渲染还是更新渲染
    let prevVnode = vm._vnode; // 首次渲染时，vm._vnode为null
    if (!prevVnode) {
      vm.$el = patch(vm.$el, vnode);
      vm._vnode = vnode;
    } else {
      patch(prevVnode, vnode);
    }
  }
}

export function callHook(vm, hook) {
  const handlers = vm.$options[hook];
  if (handlers) {
    handlers.forEach(handler => handler.call(vm));
  }
}